<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta name="description" content="新网页设计师。web标准的教程站点，推动web标准在中国的应用" />
<meta name="keywords" content="designing, with, web, standards, xhtml, css, graphic, design, layout, usability, ccessibility, w3c, w3, w3cn, ajie" />
<title>上传头像</title>
<link rel="icon" type="image/x-icon" href="http://static.test.com/images/common/favicon.ico" />
<link rel="shortcut icon" type="image/x-icon" href="http://static.test.com/images/common/favicon.ico" />
<link rel="stylesheet" type="text/css" href="http://static.test.com/style/v1/base.css" />
<link rel="stylesheet" type="text/css" href="http://static.test.com/style/v1/uc.css" />
<link rel="stylesheet" type="text/css" href="http://static.test.com/style/v1/guide.css" />
<style>
.upload_desc{margin:20px 0 15px 0; padding:0 0 0 50px; color:#666666;}
.upload_edit{margin:2px 0 10px 50px;}

.div_avatar_default h4{ padding:2px 0 5px 0; color:#666;}
.div_avatar_default .avatar_border{border:1px solid #EDEDED; background-color:#F9F9F9; padding:3px; width:125px;}
.join_upload_avatar{margin:30px auto;padding:10px;width:700px;}
.upload_swf{min-height:30px;}
.upload_button{width:514px;height:30px;padding:5px 0;}
.upload_progress{padding:5px 0;}
.upload_progress p{color:#666666;}
.upload_progress .upload_percent{margin:5px 10px;}
.install_flash{background:#FDFFDA none repeat scroll 0 0;color:#666666;line-height:200%;padding:10px 10px 10px 60px;text-align:left;}
.avatar_editor{margin:5px 0;}
.avatar_editor .editor_box{width:450px; height:285px; background:url(http://static.test.com/style/v1/images/uc/user/join_upload_avatar.png) 0 0 no-repeat;}

</style>

</head>
<body>
{include file="inc/head_join.html"}
<div class="page970">
  <div class="guide_setp_container">
    <div class="guide_setp">
      <ul class="clearfix">        
        <li class="circular s_visted"></li>
        <li class="previous">1.完善资料</li>
        <li class="current">2.上传头像</li>
        <li class="last">3.找到好友，进入首页</li>
        <li class="circular e_visted"></li>
      </ul>
    </div>
  </div>
  <div class="guide_body">
    <div class="guide_title">
      <h1><strong>上传一张真人照片，可以获得更多关注，结识更多新朋友。</strong></h1>
    </div>
    <div class="user_upload_avatar">
      <div class="upload_desc">如果您电脑上有摄像头，也可以通过电脑摄像头在线拍照设置头像照片。<a href="javascript:void(0);" id="a_use_camera">使用摄像头</a></div>
      <div class="upload_edit">
          <table width="100%" border="0" cellpadding="0" cellspacing="0">
            <tr>
              <td width="200" valign="top">
              <div class="div_avatar_default">
                <h4>系统默认头像</h4>
                <div class="avatar_border"><div class="avatar_default_b"></div></div>
              </div>
              </td>
              <td valign="top">
                  <div id="div_upload_swf" class="upload_swf">
                      <div id="flash_button_wrap" class="upload_button" style="display:none;"><div><input type="button" /></div></div>
                      <div id="flash_progress_bar_wrap" class="upload_progress" style="display:none;">
                          <p>头像上传中，请稍等.... </p>
                          <div><div class="load_progress" style="margin:5px 0; float:left;"><em style="width:0%;"></em></div><span class="upload_percent">0%</span></div>
                      </div>
                      <div id="flash_install_tip" class="install_flash" style="display:none;">
                          上传头像需要安装最新版本的Flash播放器，请 <a target="_blank" href="http://get.adobe.com/flashplayer/">点此下载</a>
                          <p>安装完成后，重启浏览器就可以正常使用了</p>
                      </div>
                  </div>
                  <div id="div_upload_editor" class="avatar_editor" style="display:block;"><div class="editor_box"></div></div>
              </td>
            </tr>
          </table>
      </div>
    </div>
	</div>
</div>
{include file="inc/footer.html"}
{literal}
<script type="text/javascript" src="http://static.test.com/js/lib/jquery.js"></script>
<script type="text/javascript" src="http://static.test.com/common/SWFUpload/swfupload.js"></script>
<script type="text/javascript" src="http://static.test.com/js/jquery.swfobject.js"></script>
<script type="text/javascript" src="http://static.test.com/js/jquery.swfupload.js"></script>
<script language="javascript">
function avatarSaved() {
	window.location.href = '/home.do';
}

function avatarError(msg) {
	alert('上传头像提示 \n 头像上传失败!请重试：'+ msg);
}

function flashAvatarEditShow(settings) {
	var _vars = $.extend({
		type: 'photo',
		postUrl: 'http://uc.sns.com/member/avatar_camera_save.php',
		saveUrl: 'http://uc.sns.com/member/avatar_save.php',
		statCodePrefix: 'avatar_upload_',
		onSuccess: '',
		onFailure: '',
		photoUrl: '',
		photoId: 0
	}, settings);
	
	$('#div_upload_editor').flash({
		swf: 'http://static.test.com/swf/avatar_editor.swf',
		width: 514,
		height: 464,
		flashvars: _vars
	});
}

function flashAvatarEditFromUrl(url, pid) {
	flashAvatarEditShow({photoUrl:url, photoId:pid});
}

function flashAvatarEditFromCamera() {
	flashAvatarEditShow({type: 'camera'});
}

$(function(){
	if($.flash.hasVersion(10)) {
		$('#a_use_camera').click(function(){flashAvatarEditFromCamera();}); 
		var _progressBar = $('#flash_progress_bar_wrap');
		var _buttonWrap = $('#flash_button_wrap');
		_buttonWrap.show();
		
		_buttonWrap.children('div').swfupload({
			flash_url: "http://static.test.com/common/SWFUpload/swfupload.swf",
			upload_url: "http://uc.sns.com/member/avatar_swfupload_save.php",
			post_params: {"ff" : "ff"},
			file_size_limit: "2 MB",
			file_types: "*.jpg;*.jpeg",
			file_types_description: "Image Files",
			file_upload_limit: 5,
			file_queue_limit: 1,
			
			button_image_url: "http://static.test.com/style/v1/images/uc/user/avatar_upload_button.png",
			button_width: 144,
			button_height: 27,
			button_placeholder: _buttonWrap.find('input').get(0),
			button_action: SWFUpload.BUTTON_ACTION.SELECT_FILE,
			button_disabled: false,
			button_cursor: SWFUpload.CURSOR.HAND,
			
			debug: false
		}).bind('fileQueued', function(event, file){
			$(this).swfupload('startUpload');
		}).bind('uploadStart', function(event, file){
			_progressBar.find('em').css('width', '0%'); 
			_progressBar.find('span').html('0%');
			_progressBar.show();
		}).bind('uploadProgress', function(event, file, bytesLoaded, bytesTotal){
			var _percent = Math.ceil((bytesLoaded / bytesTotal) * 100);
			_progressBar.find('em').css('width', _percent +'%'); 
			_progressBar.find('span').html(_percent +'%');
		}).bind('uploadSuccess', function(event, file, serverData){
			//var _url = "/member/uploads/"+ serverData;
			var _vars = serverData.split('|');
			_progressBar.hide();
			flashAvatarEditFromUrl(_vars[1], _vars[0]);
		});
	} else {
		$('#flash_install_tip').show();
	}
}); 
</script>
{/literal}
</body>
</html>
